<template>
    <el-dropdown ref="dropdownRef" trigger="click" placement="bottom-start">
        <app-button2 :style="`width: ${width};`">
            <div style="width: 100%;display: flex;justify-content: space-between;">
                <div class="text1" v-if="itemData.bc_type_id == ''">选择平台</div>
                <div v-if="itemData.bc_type_id != ''">{{ itemData.value?.platform_name || '' }}</div>
                <div class="select_img"></div>
            </div>
        </app-button2>
        <template #dropdown>
            <div class="select_plant">

                <div class="header">
                    <div class="item" @click="clickmenu(item.value)" v-for="item in menus" :key="item.value"
                        :class="item.value == activeMenu ? 'active_item' : ''">{{ item.label }}</div>
                </div>

                <div style="display: flex; flex-direction: column; position: relative; width: 100%;">
                    <div class="search">
                        <el-input v-model="keyword" style="width: 100%" placeholder="请输入" @change="changekeyword()"
                            :suffix-icon="Search" class="search_key" />
                    </div>

                    <div class="plat_body">

                        <template v-if="activeMenu == 0">
                            <template v-if="data.length > 0">
                                <el-scrollbar height="150px">
                                    <div class="list">
                                        <div class="item" @click="clickplat(item)" v-for="item in data" :key="item.id">
                                            <img src="@/assets/home/platform.png" style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                            <div>{{item.platform_name }}</div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </template>
                            <template v-else>
                                <app-none :size="80" />
                            </template>
                        </template>
                        <template v-if="activeMenu == 1">
                            <template v-if="data.length > 0">
                                <el-scrollbar height="150px">
                                    <div class="list">
                                        <div class="item" @click="clickplat(item)" v-for="item in data" :key="item.id">
                                            <img @click.stop="deletePlat(item)" src="@/assets/home/delete_hover.png"
                                                style="width: 16px;height: 16px;margin-right: 8px;" alt="">
                                            <div>{{ item.platform_name }}</div>
                                        </div>
                                    </div>
                                </el-scrollbar>

                                <div class="text2" @click="clickaddPlat()">添加自定义平台</div>
                            </template>
                            <template v-else>
                                <div style="min-height: 200px;">
                                    <app-none :size="80" />
                                    <div class="text2" @click="clickaddPlat()">添加自定义平台</div>
                                </div>
                            </template>
                        </template>


                    </div>
                    <div class="overlay" v-if="drawer" @click="changedraw()"></div>
                    <div class="drawer_body" v-if="drawer">
                        <div class="inputs">
                            <div class="item">
                                <div class="label">平台名称:</div>
                                <div class="value">
                                    <el-input v-model="addplatForm.name" style="width: 100%" placeholder="平台名称" />
                                </div>
                            </div>
                            <div class="item">
                                <div class="label">平台地址:</div>
                                <div class="value">
                                    <el-input v-model="addplatForm.url" style="width: 100%" placeholder="平台地址" />
                                </div>
                            </div>

                        </div>
                        <div style="display: flex;justify-content: flex-end;">
                            <app-button2 @click="changedraw()">取消</app-button2>
                            <app-button2 style="margin-left: 8px;" class="app-button-ptn"
                                @click="submitaddPlat()">确定</app-button2>
                        </div>
                    </div>
                </div>



            </div>
        </template>
    </el-dropdown>



</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { http } from '@/utils/http'
const props = defineProps({
    itemData: Object,
    options: Array,
    plantUserIndex: Number,
    width: String
})

const activeMenu = ref(0)
const keyword = ref('')
const activeData = ref({})
const emits = defineEmits()
const menus = ref([
    {
        value: 0,
        label: '全部'
    }, {
        value: 1,
        label: '自定义'
    },
])

const dropdownRef = ref(null)

const drawer = ref(false)
const addplatForm = ref({
    name: '',
    url: ''
})

const data = computed(() => {
    let a = []
    props.options.forEach(item => {
        if (item.data && item.data.url != '' && item.label.includes(keyword.value)) {
            if (activeMenu.value == 0) {
                a.push(item.data)
            }
            if (activeMenu.value == 1 && item.data.type == 'custom') {
                a.push(item.data)
            }


        }
    });
    return a

})

const changekeyword = () => {

}

const clickplat = (row) => {
    props.itemData.bc_type_id = row.id
    props.itemData.value = row
    dropdownRef.value.handleClose()

}

const changedraw = () => {
    drawer.value = false
    addplatForm.value = {
        name: '',
        url: ''
    }
}

const clickmenu = (value) => {
    activeMenu.value = value
    changedraw()
}

const clickaddPlat = () => {
    drawer.value = true
}

const submitaddPlat = () => {
    let body = {
        platform_name: addplatForm.value.name,
        url: addplatForm.value.url
    }

    http.post('/environment/creat_platform', body).then((res) => {
        changedraw()
        emits('changemap')
    })
}

const deletePlat = (row) => {
    http.delete(`/environment/delete_platform?id=${row.id}`).then((res) => {
        emits('changemap')
    })
}

</script>

<style lang="scss" scoped>
.select_plant {
    width: 650px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;


    .header {
        width: 100%;
        height: 32px;
        display: flex;
        border-bottom: 1px solid #d9d9d9;

        .item {
            margin-right: 16px;
            font-size: 14px;
            border-bottom: 2px solid #fff;
            cursor: pointer;
        }

        .active_item {
            color: #3569fd;
            border-bottom: 2px solid #3569fd;
        }
    }

    .search {
        margin-top: 16px;
    }

    .plat_body {
        margin-top: 16px;
        display: flex;
        flex-direction: column;


        .list {
            display: flex;
            flex-direction: column;

            .item {
                height: 32px;
                font-size: 14px;
                color: #1d2129;
                display: flex;
                align-items: center;
                cursor: pointer;
                padding: 0 12px;
            }

            .item:hover {
                background-color: #F2F6FC;
            }
        }
    }
}

.select_img {
    margin-left: 8px;
    width: 14px;
    height: 14px;
    background: url('@/assets/home/down.png');
    background-size: cover;
}

.text1 {
    color: #bfbfbf;
}

.text2 {
    margin-top: 16px;
    color: #3569fd;
    font-size: 14px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.overlay {
    position: absolute;
    z-index: 2000;
    width: 100%;
    height: 50%;
    background-color: rgba(0, 0, 0, .5);
}

.drawer_body {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background-color: #fff;
    z-index: 2001;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .inputs {
        display: flex;
        flex-direction: column;
        width: 100%;

        .item {
            display: flex;
            align-items: center;
            margin-top: 16px;
            width: 100%;

            .label {
                width: 100px;
                display: flex;
                justify-content: flex-end;
                font-size: 14px;
                margin-right: 8px;
            }

            .value {
                flex: 1;
            }
        }
    }
}
</style>

<style>
.search_key .el-input__wrapper.is_focus {
    /* border: 1px solie red !important; */
    box-shadow: 0 0 0 1px red inset !important;
}
</style>